<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>案例操作</title>
	<style type="text/css">
	  * {
	    padding: 0;
	    margin: 0;
	  }
	  body {
	    padding: 200px;
	  }
	  ul {
	    list-style: none;
	    display: flex;
	    width: 200px;
	    flex-direction: column;
	  }
	  li {
	    height: 30px;
	    border: solid 2px #e67e22;
	    margin-bottom: 10px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding-left: 10px;
	    color: #333;
	    transition: 1s;
	  }
	  a {
	    border-radius: 3px;
	    width: 20px;
	    height: 20px;
	    text-decoration: none;
	    text-align: center;
	    background: #16a085;
	    color: white;
	    cursor: pointer;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin-right: 5px;
	  }
	  .remove {
	    border: solid 2px #eee;
	    opacity: 0.8;
	    color: #eee;
	  }
	  .remove a {
	    background: #eee;
	  }
	</style> 
</head>
<body>
	<div class="container">
		<h1>案例操作</h1>
	</div>
  <ul>
    <li>houdunren.com <a href="javascript:;">x</a></li>
    <li>hdcms.com <a href="javascript:;">x</a></li>
    <li>houdunwang.com <a href="javascript:;">x</a></li>
  </ul>
 <script>
 	class Todos {
 		constructor() {

 		}

 		run() {
 		  this.items = document.querySelectorAll("ul>li");
	      this.lists = new WeakSet();
	      this.record();
	      this.addEvent();
 		}
 		addEvent() {
 			this.items.forEach(item => {
 				item.querySelector('a').addEventListener('click', event => {
 					var parent = event.target.parentNode
 					if(this.lists.has(parent)) {
 						parent.classList.add('remove')
 						this.lists.delete(parent)
 					} else {
 						alert('已经被删除了')
 					}
 				})
 			})
 		}
 		record() {
 			this.items.forEach(item => this.lists.add(item))
 		}
 	}

 	new Todos().run()

 </script>

</body>
</html>